<template>
    <div id="map">
        <div class="MapTool">
            <div class="block">
                <span class="demonstration">曝光量</span>
                <el-slider v-model="variables.exposure" :min="-1" :max="1" :step="0.01" @change="handleChange($event,'exposure')"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">对比度</span>
                <el-slider v-model="variables.contrast" :min="-1" :max="1" :step="0.01" @change="handleChange($event,'contrast')"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">饱和度</span>
                <el-slider v-model="variables.saturation" :min="-1" :max="1" :step="0.01" @change="handleChange($event,'saturation')"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">亮度值</span>
                <el-slider v-model="variables.brightness" :min="-1" :max="1" :step="0.01" @change="handleChange($event,'brightness')"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">伽马值</span>
                <el-slider v-model="variables.gamma" :min="0" :max="100" :step="1" @change="handleChange($event,'gamma')"></el-slider>
            </div>
        </div>
    </div>
</template>

<script setup>
    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/WebGLTile';
    import View from 'ol/View';
    import {onMounted,ref} from 'vue';
    import { XYZ } from "ol/source";

    const variables = ref({
      exposure: 0,//曝光度
      contrast: 0,//对比度
      saturation: 0,//饱和度
      brightness:0,//亮度值
      gamma:1//伽马值
    });
    const map = ref(null);
    const tileLayer = ref(null);

    const handleChange = (value,type) => {
      const updateParams = {};
      updateParams[type] = value;
      tileLayer.value.setProperties(updateParams);
    }

    onMounted(()=>{
        const tileLayers = new TileLayer({
        source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
        style: {
          brightness:['var', 'brightness'],
          gamma:['var', 'gamma'],
          exposure: ['var', 'exposure'],
          contrast: ['var', 'contrast'],
          saturation: ['var', 'saturation'],
          variables: variables.value,
        }
      })
      tileLayer.value = tileLayers;
      map.value = new Map({
        target:'map',
        layers: [tileLayers],
        //配置视图
        view: new View({
          center: [0, 0],
          zoom: 0,
        }),
      })
    })

</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
        width: 250px;
    }
</style>